let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;//引用了外边的guest！！！
  return <h2>Tea cup for guest #{guest}</h2>;
}

function Tea({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <div style={{ display: "flex", marginLeft: 100, marginRight: 100 }}>
        <div>
          <Cup />
          <Cup />
          <Cup />
        </div>
        <hr />
        <div>
          <Tea guest={1} />
          <Tea guest={2} />
          <Tea guest={3} />
        </div>
      </div>
      有些 JavaScript 函数是 纯粹 的。纯函数的基本定义：
      <ul>
        <li>
          只负责自己的任务。 它不会更改在该函数调用前就已存在的对象或变量。
        </li>
        <li>
          输入相同，输出也相同。在输入相同的情况下，对纯函数来说应总是返回相同的结果。
        </li>
      </ul>
      严格遵循纯函数的定义编写组件，可以让代码库体量增长时，避免一些令人困惑的错误和不可预测的行为。
      <br />
      <a target="_blank" style={{fontSize:30,color:'rebeccapurple'}} href="https://zh-hans.react.dev/learn/describing-the-ui#keeping-components-pure">保持函数纯粹</a>
    </>
  );
}
